<template>
  <div style="color:white;font-size: 20px">
  <div class="top-back" ></div>
  <div class="header-bg">
    <el-row type="flex" justify="space-between">
      <el-col :span="8"><div class="grid-content "> '智慧国医堂惠民系统'</div></el-col>
      <el-col :span="8"><div class="grid-content ">
        <el-row type="flex" justify="space-between">
          <el-col :span="8"><div><el-link type="info" style="color: white">{{msg}}</el-link></div></el-col>
          <el-col :span="4" ><div><i class="el-icon-user-solid"></i></div></el-col>
          <el-col :span="8"><div><el-link type="info" style="color: white" @click="dialogVisible = true">修改密码</el-link>
            <el-dialog
              title="提示"
              :visible.sync="dialogVisible"
              width="30%"
              :before-close="handleClose"><UpDataPassword></UpDataPassword></el-dialog></div> </el-col>
          <el-col :span="8"offset="1"><div><el-link type="info" style="color: white">退出</el-link></div> </el-col>
        </el-row>
      </div></el-col>
    </el-row>
  </div>
  <div class="top-back" ></div>
  </div>
</template>

<script>
  export default {
    name: 'Header',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        dialogVisible: false
      }
    },
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .header-bg{
    background: rgb(91,70,34);
    width: 100%;
    height: 40px;
  }
  .top-back{
    background: url(../assets/top.png);
    height: 15px;
    width: 1920px;
  }

  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 50px;

  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
